
import { useContext } from 'react'
import { Layout, Menu } from 'antd'

import { $ } from '@components/util'
import { NavigateMode } from '../constant/main-frame-constants';

import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { appLogo, collapsedAppLogo } from '../images'; 
import styles from '../styles/main-frame.module.css'

import context from '@contexts/frame-context'

const sider_class = $(
  styles, 
  'ant-pro-sider', 
  'ant-pro-sider-fixed', 
  'ant-pro-sider-layout-side', 
  'ant-pro-sider-light', 
  'irs-main-sider',
)

const sider_content_class = $(styles, 'irs-menu-container')
const menu_class = $(styles, 'ant-pro-sider-menu')
const logo_view_class = $(styles, 'ant-pro-sider-logo', 'irs-sider-logo')
const collapsed_logo_view_class = $(styles, 'ant-pro-sider-logo', 'irs-sider-logo', 'ant-pro-sider-collapsed')
const toggle_button_menu_container_class = $(styles, 'ant-pro-sider-links')
const toggle_button_menu_class = $(styles, 'ant-pro-sider-link-menu')
const toggle_button_class = $(styles, 'ant-pro-sider-collapsed-button')

// sider padding top
const getPaddingTop = (navigateMode, headerHeight) => {
  if (navigateMode === NavigateMode.mixMenu) {
    return headerHeight
  }
  return null
}

// sider top logo view
const getLogoView = (navigateMode, collapsed) => {
  if (navigateMode === NavigateMode.sideMenu) {
    const logoImage = collapsed ? collapsedAppLogo : appLogo
    return (
      <div id='logo' className={collapsed ? collapsed_logo_view_class : logo_view_class}>
        <a>
          <img alt='logo' src={logoImage}/>
        </a>
      </div>
    )
  }
  return null
}

// bottom toggle menu
const getBottomToggleMenu = (collapsed, setCollapsed) => {
  return (
    <div className={toggle_button_menu_container_class} >
      <Menu 
        mode='inline'
        selectable={false} 
        onClick={() => setCollapsed((value) => !value) }
        items={getBottomToggleMenuItems(collapsed)} 
        className={toggle_button_menu_class}
        />
    </div>
  )
}

// bottom toggle menu items
const getBottomToggleMenuItems = (collapsed) => {
  return [
    {
      key: 'collapsed',
      label: collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />,
      className: toggle_button_class,
      style: { paddingLeft: 16 },
      title: null,
    }
  ]
}

//
const FCInternalSider = ({
  menuItems, 
  onMenuItemClick,
  openKeys = [],
  setOpenKeys,
  selectedMenuItemKey,
}) => {

  const { 
    navigateMode, 
    collapsed, 
    setCollapsed,
    siderWidth, 
    collapsedSiderWidth, 
    currentSiderWidth,
    headerHeight,
  } = useContext(context)

  const paddingTop = getPaddingTop(navigateMode, headerHeight)
  const logoView = getLogoView(navigateMode, collapsed)
  const bottomToggleMenu = getBottomToggleMenu(collapsed, setCollapsed)

  return (
      <Layout.Sider 
        theme='light'
        collapsed={collapsed}
        width={siderWidth}
        collapsedWidth={collapsedSiderWidth}
        style={{
          overflow: 'hidden',
          paddingTop: paddingTop,
          transition: 'all 0.2s',
        }}
        className={sider_class}
        >
        {logoView}
        <div 
          className={sider_content_class}
          style={{
            flex: 1, 
            overflowX: 'hidden',
            overflowY: 'auto',
          }}
          >
          <Menu 
            mode='inline'
            theme='dark'
            items={menuItems} 
            style={{width: '100%'}}
            className={menu_class}
            selectedKeys={[selectedMenuItemKey]}
            openKeys={openKeys}
            onOpenChange={setOpenKeys}
            onClick={onMenuItemClick}
            // onOpenChange={onMenuOpenChange}
            />
        </div>
        {/* {bottomToggleMenu} */}
      </Layout.Sider>
  )
}

export default FCInternalSider
